<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>

<body>
    <table>
        <tr>
            <th>
                <input type="checkbox" name="all">全选
            </th>
            <th>序号</th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>合计</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="goods" value="9999">
            </td>
            <td>1</td>
            <td>手机</td>
            <td>9999</td>
            <td>
                <button onclick="sub(event)">-</button>
                <input value="2" onchange="getSum()"/> 
                <button onclick="add(event)">+</button>
            </td>
            <td></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="goods" value="8999"></td>
            <td>2</td>
            <td>电脑</td>
            <td>8999</td>
            <td>
                <button onclick="sub(event)">-</button>
                <input vanclick=lue="1" /> 
                <button o"add(event)">+</button>
            </td>
            <td></td>
        </tr>
    </table>
    <span>总价：<span class="total"></span></span>

    <script>
        let all = document.querySelector("[name='all']")
        let goodses = document.querySelectorAll("[name='goods']")
        let totalBox = document.querySelector(".total")
        all.onclick = () => {
            let total = 0
            goodses.forEach((e) => {
                e.checked = all.checked
                total += parseInt(e.value)
            })
            if (!all.checked) {
                totalBox.innerText = 0
                return
            }
            totalBox.innerText = total
        }

        let count = 0;

        // 通过当前元素的选中状态，修改全选框的选中状态
        function checkStatus(el) {
            if (!el.checked) { // 如果点击事件是取消选中
                all.checked = false
            }
            let flag = true
            goodses.forEach(e => {
                if (!e.checked) {
                    flag = false
                }
            })
            all.checked = flag
        }

        // goodses.forEach(e => {
        //     e.onclick = () => {
        //         if (e.checked) {
        //             count ++;
        //             if (count == goodses.length) {
        //                 all.checked = true
        //                 count = 0
        //             }
        //             let old = parseInt(totalBox.innerText ? totalBox.innerText : '0')
        //             totalBox.innerText = old + parseInt(e.value)
        //         } else {
        //             let old = parseInt(totalBox.innerText ? totalBox.innerText : '0')
        //             totalBox.innerText = old - parseInt(e.value)
        //             count--;
        //             if (count < 0) {
        //                 count = 0;
        //             }
        //             all.checked = false
        //         }
        //     } 
        // })
        goodses.forEach(e => {
            e.onclick = (event) => {
                // event --> 当前的鼠标事件
                // event.target --> 当前的元素
                checkStatus(event.target)
            }
        })

        goodses.forEach(e => {
            // 当前元素的父元素
            let td = e.parentNode;
            // 找兄弟元素 -- 单价
            let price = td.nextElementSibling.nextElementSibling.nextElementSibling
            console.log(price.innerText);
            // -- 数量
            let number = price.nextElementSibling.children[1]
            console.log(number.innerText);
            let rowTotal = parseInt(price.innerText) * parseInt(number.value)
            let rowTotalEl = price.parentNode.lastElementChild
            console.log(rowTotalEl);
            rowTotalEl.innerText = rowTotal
        })

        function sub(event) {
            let t = event.target
            // 数量
            let number = t.nextElementSibling
            let num = parseInt(number.value)
            if (num > 1) {
                num--;
            }
            number.value = num
        }

        function add(event) {
            let t = event.target
            // 数量
            let number = t.previousElementSibling
            let num = parseInt(number.value)
            if (num < 10) {
                num++;
            }
            number.value = num
        }

        function getSum() {
            // 数量
            let t = event.target
            let number = t.value
            console.log(number);
            // 单价
            let price = t.parentNode.previousElementSibling
            let p = parseFloat(price.innerText)
            console.log(price);
            let sum = p * parseInt(number)
            // 小计
            price.nextElementSibling.nextElementSibling.innerText = sum
        }
    </script>
</body>

</html>